<template>
  <div class="login">
    <div class="login_form">
      <a-form ref="loginRef" :model="loginForm" :hideRequiredMark="true">
        <a-form-item
          label="账号"
          name="username"
          :rules="[{ required: true, message: '请输入账号' }]"
        >
          <a-input v-model:value="loginForm.username" placeholder="请输入账号" />
        </a-form-item>
        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password
            v-model:value="loginForm.password"
            autocomplete="off"
            placeholder="请输入密码"
          />
        </a-form-item>
        <a-form-item :wrapperCol="{ offset: 4 }">
          <div class="flex justify-between align-center">
            <a-checkbox v-model:checked="checked">保存密码</a-checkbox>
            <a-button type="link">有疑问？</a-button>
          </div>
        </a-form-item>
        <div class="form_footer">
          <a-button type="primary" block shape="round" @click="submit">登录</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router';
  import { message } from 'ant-design-vue';
  import { useAppStore } from '@/store';
  import api from '@/api';
  const router = useRouter();
  const store = useAppStore();
  const loginRef = ref(null);
  const loginForm = ref({});
  const checked = ref(false);
  const submit = () => {
    loginRef.value
      .validate()
      .then((res) => {
        if (checked.value === true) {
          localStorage.setItem('loginForm', JSON.stringify(toRaw(loginForm.value)));
        } else {
          localStorage.removeItem('loginForm');
        }
        api.base.login(toRaw(loginForm.value)).then((res) => {
          if (res.data.status === true) {
            message.success(res.data.message || '登录成功');
            store.setUser(res.data.data);
            router.push({
              name: 'home',
            });
          } else {
            message.error(res.data.message || '登录失败');
          }
        });
      })
      .catch((err) => {
        console.log('error', err);
      });
  };
  const isChecked = computed(() => {
    return JSON.parse(localStorage.getItem('loginForm'))?.password;
  });
  watchEffect(() => {
    if (isChecked.value) {
      loginForm.value = JSON.parse(localStorage.getItem('loginForm'));
      checked.value = true;
    }
  });
</script>

<style lang="less" scoped>
  .login {
    width: 100%;
    height: 100%;
    background: url('@/assets/vcp_bg.jpg') no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    &_form {
      background: rgba(255, 255, 255, 0.2);
      padding: 50px;
      border-radius: 10px;
      .ant-input,
      .ant-input-password {
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        border: 0;
        :deep(input) {
          background: transparent;
        }
      }
      :deep(.ant-checkbox-wrapper) {
        margin: 5px 0;
        color: #fff;
        font-size: 12px;
        .ant-checkbox {
          font-size: 12px;
        }
        .ant-checkbox-inner {
          width: 14px;
          height: 14px;
        }
        .ant-checkbox-input {
          width: 12px;
          height: 12px;
        }
      }
      .form_footer {
        display: flex;
        justify-content: space-evenly;
      }
    }
  }
</style>
